

<template>
    <div>
      <el-form :inline="true" class="demo-form-inline"  >
          <el-row>
              <p><b>首页</b>/住院部/出院申请表</p>
          </el-row>
  <br>
          <el-row>
              <el-col :span="3">
                  <el-form-item >
                  <el-input placeholder="请输入病人" v-model="param.patientName"></el-input>
                  </el-form-item>
              </el-col>
  
              <el-col :span="4">
                  <el-form-item >
                      <el-date-picker
                      v-model="valuedate"
                          type="daterange"
                          range-separator="至"
                          start-placeholder="开始日期"
                          end-placeholder="结束日期"
                          value-format="yyyy-MM-dd">
                      </el-date-picker>
                  </el-form-item>
              </el-col>

              <el-col :span="3" :offset="3">
                <el-switch
                    v-model="value"
                    active-color="#13ce66"
                    inactive-color="#ff4949"
                    active-text="是否为自己的病人"
                    active-value="1"
                    inactive-value="0"
                    >
                </el-switch>
              </el-col>
  
              <el-col :span="3" :offset="2">
                  <el-form-item>
                      <el-button type="primary" @click="queryAllInPatient">查询</el-button>
                      <el-button @click="resetForm">清空</el-button>
                  </el-form-item>
              </el-col>
          </el-row> 
      </el-form>
  
      <el-row>
          <el-table
              :data="tableData"
              style="width: 100%"
              >
              <el-table-column
              fixed
              prop="caseName"
              label="病人"
              >
              </el-table-column>
              <el-table-column
              prop="departmentName"
              label="住院科室"
              >
              </el-table-column>
              <el-table-column
              prop="workerName"
              label="医生"
              >
              </el-table-column>
              <el-table-column
              prop="startTime"
              label="入住日期"
              >
              </el-table-column>
             
              <el-table-column
              fixed="right"
              label="病例"
              >
              <template slot-scope="scope">
                  <el-button @click="medicalRecordBtn(scope.row.caseId)">查看病例</el-button>
              </template>
              </el-table-column>

              <el-table-column
              fixed="right"
              label="操作"
              >
              <template slot-scope="scope">
                  <el-button v-if="scope.row.status==3" :disabled="scope.row.status!='3' ? false:true">
                  已办理出院
                  </el-button>
                  <el-button v-if="scope.row.status!=3" :disabled="scope.row.status!='3' ? false:true"
                  @click="treatmentBtn(scope.row.caseId,scope.row.caseName,scope.row.workerId)">
                  就诊
                  </el-button>
              </template>
              </el-table-column>
          </el-table>
      </el-row>
  
      <el-row>
        <el-col>
          <el-pagination
                  background
                  :page-sizes="[3, 5, 10, 30]"
                  :page-size="pageSize"
                  :current-page="pageNum"
                  layout="prev, pager, next, total, sizes"
                  :total="total"
                  @next-click="nextPage"
                  @prev-click="prevPage"
                  @current-change="changePage"
                  @size-change="changeSize"
                  >
          </el-pagination>
        </el-col>
      </el-row>
  

      <!-- 查看病例记录弹窗开始 -->
      <el-dialog title="病例记录" :visible.sync="medicalRecordForm" style="text-align: center;">
        <el-table v-if="!loading" :data="medicalRecordData">
            <el-table-column property="workerName" label="编写医生"></el-table-column>
            <el-table-column property="content" label="病例描述"></el-table-column>
            <el-table-column property="date" label="编写时间"></el-table-column>
            <el-table-column property="type" label="编写门诊"></el-table-column>
            
        </el-table>
        <div v-else v-loading="loading" element-loading-spinner="el-icon-loading"></div>
        <div slot="footer" class="dialog-footer">
            <el-button @click="medicalRecordForm = false">退出</el-button>
        </div>
      </el-dialog>
      <!-- 查看病例记录弹窗开始 -->


      <!-- 就诊弹窗开启 -->
      <el-dialog v-if="treatmentForm" title="就诊"  :visible.sync="treatmentForm" style="text-align: center;">
        <el-tabs v-model="activeName">
            <el-tab-pane :label="tab.label" :name="tab.name" :key="tab.name"
             v-for="tab in tabs">
             <component :is="tab.component" :message="Fathermessage"></component>
            </el-tab-pane> 
        </el-tabs>
      </el-dialog>
       <!-- 就诊弹窗关闭 -->
  </div>
  </template>
  
  <script>
  import Component1 from './treatmentPackage/Component1.vue';
  import Component2 from './treatmentPackage/Component2.vue';
  import Component3 from './treatmentPackage/Component3.vue';
  import Component4 from './treatmentPackage/Component4.vue';
  import Component5 from './treatmentPackage/Component5.vue';
  import Component6 from './treatmentPackage/Component6.vue';
  import Component7 from './treatmentPackage/Component7.vue';

  export default {
    data() {
      return {
          tableData: [{
          }],
          activeName:'1',
          tabs:[
            {label:"开检查",name:'1',component:Component1},
            {label:"开药申请",name:'2',component:Component2},
            {label:"手术申请",name:'3',component:Component3},
            {label:"医嘱",name:'4',component:Component4},
            {label:"出院申请",name:'5',component:Component5},
            {label:"退药申请",name:'6',component:Component6},
            {label:"病例编写",name:'7',component:Component7},
          ],

          param:{
          },
          valuedate:'',
          pageSize:5,
          pageNum:1,
          total:0,
          value:'0',
          workerId:'',
          medicalRecordForm:false,
          medicalRecordData:[],
          loading:false,
          treatmentForm:false,
          Fathermessage:{
          }
      }
    },
  
    methods: {
        
        queryAllInPatient(){
            let pageData={}
            this.param.startTime=this.valuedate[0]
            this.param.endTime=this.valuedate[1]
            this.param.value=this.value
            this.param.workerId=this.workerId

            pageData.pageSize=this.pageSize
            pageData.pageNum=this.pageNum
            pageData.param=this.param
            this.$axios.post('api/doctor/queryAllInPatient',pageData).then(resp=>{
                if(resp.data.code==200){
                    this.tableData=resp.data.data.list
                    this.total=resp.data.data.total
                    // console.log(this.tableData)
                }
            })
        },

        medicalRecordBtn(caseId){
            this.loading=true
            this.$axios.get('api/doctor/queryMedicalRecord/'+caseId).then(resp=>{
                this.medicalRecordForm=true
                if(resp.data.code==200){
                    this.medicalRecordData=resp.data.data
                    setTimeout(()=>{
                        this.loading=false
                    },200)
                }
                
            })
        },

        treatmentBtn(caseId,caseName,workerId){
            this.treatmentForm=true
            this.Fathermessage.caseId=caseId
            this.Fathermessage.caseName=caseName      
            this.Fathermessage.workerId=workerId   
        },  


      //下一页方法
      nextPage(val){
                      //回调参数val,val等于当前页码
                      this.pageNum=val
                      this.queryAllInPatient()
      },
      //上一页方法
      prevPage(val){
                      //回调参数val,val等0.于当前页码
                      this.pageNum=val
                      this.queryAllInPatient()
      },
      changePage(val){
                      this.pageNum=val
                      this.queryAllInPatient()
      },
      changeSize(val){
                      this.pageSize=val
                      this.pageNum=1
                      this.queryAllInPatient()
      },
      resetForm(){
        this.param.patientName=''
        this.valuedate=''
      },
  
    },
  
    created(){
        this.queryAllInPatient()
    }
  }
  </script>
  
  <style scoped>
  
  </style>